<template>
	<view id="myview">
		<view>
			<view>
				<text class="iconfont icon-xiangzuojiantou"></text><text>修改手机号</text>
			</view>
		</view>
		<view id="telenum"><text>你当前手机号为</text><text>{{yonghudianhua}}</text></view>
		<view id="newnum">
			<view><text class="iconfont icon-shouji" style="font-size: 90rpx;"></text></view>
			<view><input type="text" v-model="oldnum" placeholder="请输入新的手机号码"/></view>
		</view>
		<view id="yanzhengma">
			<view><text class="iconfont icon-duanxin" style="font-size: 90rpx;"></text></view>
			<view><input type="text" v-model="yanzhengnum" placeholder="请输入验证码"/></view>
			<view v-if="flag==1&&oldnum" @click="send" class="fasong"><text>发送验证码</text></view>
			<view class="daojishi" v-if="flag==2&&oldnum"><text>{{miao}}</text>秒后可重发</view>
			<view class="fasongagain" v-if="flag==3&&oldnum" @click="fasongagain"><text>{{miao}}</text>重新发送验证码</view>
		</view>
		<view id="tijiao" @click="submit"><text>提交</text></view>
		<uni-popup ref="popup1" type="message">
			<uni-popup-message type="warn" message="手机号不能为空" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popup2" type="message">
			<uni-popup-message type="warn" message="验证码不能为空" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popup3" type="message">
			<uni-popup-message type="error" message="验证码不正确" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popup4" type="message">
			<uni-popup-message type="success" message="修改成功" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {ref,reactive,toRefs,watch,onMounted} from 'vue';
	import store from '../../store/index.js';
	import http from '../../utils/http.js';
	export default {
		setup(){
			let data=reactive({
				a:1,
				oldnum:'',
				yanzhengnum:'',
				yanzheng:'',
				flag:1,
				miao:6,
				jishiqi:'',
				y_id:'',
				yonghudianhua:'',
				//点击提交
				submit(){
					if(data.oldnum==''){
						console.log('手机号不能为空')
						this.$refs.popup1.open('center')
						setTimeout(()=>{
							this.$refs.popup1.close()
						},1000)
					}
					else if(data.yanzhengnum==''){
						console.log('验证码不能为空')
						this.$refs.popup2.open('center')
						setTimeout(()=>{
							this.$refs.popup2.close()
						},1000)
					}
					else if(data.yanzhengnum!=data.yanzheng){
						console.log('验证码不正确')
						data.yanzhengnum=''
						this.$refs.popup3.open('center')
						setTimeout(()=>{
							this.$refs.popup3.close()
						},1000)
					}
					else{
						console.log('修改成功')
						this.$refs.popup4.open('center')
						http({
							url:'/appEdittelphoneNumber',
							method:'post',
							data:{
								y_tel:data.oldnum,
								y_id:data.y_id
							}
						}).then((res)=>{
							console.log(res.data)
							setTimeout(()=>{
								uni.navigateTo({
									url:'../shezhi/shezhi'
								});
								this.$refs.popup4.close()
							},1000)
						})
					}
				},
				
				
				send:()=>{
					data.flag=2
					data.yanzheng=Math.ceil(Math.random()*(9999-1000+1)+1000);
					// data.jishiqi();
					console.log(data.yanzheng);
					data.jishiqi=setInterval(()=>{
						data.miao--
					},1000);	
				},
				fasongagain:()=>{
					data.flag=2
					data.yanzheng=Math.ceil(Math.random()*(9999-1000+1)+1000);
					data.miao=6
					console.log(data.yanzheng);
					console.log(data.oldnum)
					console.log(res.data)
					data.jishiqi=setInterval(()=>{
						data.miao--
					},1000);
				}
			})
			watch(()=>data.miao,(n,o)=>{
				console.log(n)
				if(n==0){
					clearInterval(data.jishiqi)
					data.flag=3
					data.miao=''
				}
			})
			onMounted(()=>{
				data.y_id=store.state.userID
				console.log(data.y_id)
				http({
					url:'/appGetYonghuData',
					method:'get',
					data:{
						y_id:data.y_id
					}
				}).then((res)=>{
					// console.log(res.data.data)
					data.yonghudianhua=res.data.data[0].y_tel
					// console.log(res.data.data[0].y_tel)
				})
			})
			return{...toRefs(data)}
		}
	}
</script>

<style lang="less">
@import url("~@/static/fonts/iconfont.css");
	#myview>view:nth-child(1){
		width: 750rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #f2f2f2;
		>view:nth-child(1){
			width:200rpx;
			height: 100rpx;
			text-align: center;
		}
	}
	#telenum{
		width: 750rpx;
		height: 200rpx;
		line-height: 200rpx;
		padding:0 50rpx;
		box-sizing: border-box;
	}
	#newnum{
		display: flex;
		width: 750rpx;
		height: 100rpx;
		padding:0 50rpx;
		box-sizing: border-box;
		>view:nth-child(1){
			margin-right: 20rpx;
		}
		>view:nth-child(2){
			height: 100rpx;
			line-height: 100rpx;
			flex: 1;
			input{
				height: 100rpx;
				line-height: 100rpx;
				flex: 1;
			}
		}
	}
	#yanzhengma{
		margin-top: 50rpx;
		display: flex;
		width: 750rpx;
		height: 100rpx;
		padding:0 50rpx;
		box-sizing: border-box;
		>view:nth-child(1){
			margin-right: 20rpx;
		}
		>view:nth-child(2){
			height: 100rpx;
			line-height: 100rpx;
			flex: 1;
			input{
				height: 100rpx;
				line-height: 100rpx;
				flex: 1;
			}
		}
	}
	.fasong{
		height: 80rpx;
		width: 200rpx;
		line-height: 80rpx;
		margin-top: 10rpx;
		color: #007AFF;
	}
	.daojishi{
		width:200rpx;
		height:80rpx;
		line-height: 80rpx;
		margin-top: 10rpx;
		text-align: center;
		color: #c2c2c2;
		border-radius: 30rpx;
		background-color: #f3f3f3;
	}
	.fasongagain{
		width:250rpx;
		height:80rpx;
		line-height: 80rpx;
		margin-top: 10rpx;
		text-align: center;
		color: #c2c2c2;
		border-radius: 30rpx;
		background-color: #f3f3f3;
	}
	#tijiao{
		width: 500rpx;
		height: 100rpx;
		background-color: #DA2222;
		text-align: center;
		line-height: 100rpx;
		margin-top:200rpx;
		color: white;
		margin-left: 125rpx;
		border-radius: 8rpx;
	}
	
</style>
